import {useCallback, useState} from "react";
import {Swiper, SwiperItem, Image, View, RichText, RichTextProps} from "@tarojs/components";
import styles from "./index.module.scss";
import P1 from './1.jpeg';
import P2 from './2.jpeg';
import P3 from './3.jpeg';
import {BottomOperation, CommentArea, InputComment} from "./components";

export default function () {

  const [onInput, setOnInput] = useState(false);

  const toInput = useCallback(()=>{
    setOnInput(true);
  }, []);

  const closeInput = useCallback(()=>{
    setOnInput(false);
  }, []);

  const content: RichTextProps['nodes'] = [
    {
      name: 'p',
      children: [
        {
          type: 'text',
          text: '营业时间 17:00-23:59'
        },
      ]
    },
    {
      name: 'p',
      children: [
        {
          type: 'text',
          text: '简单介绍一下 比如手工面筋 成都特色啥的（有可能要写很多行）'
        },
      ]
    },
  ];

  return (
    <View>
      <Swiper
        className={styles.swiper}
        indicatorDots
        circular
      >
        <SwiperItem>
          <Image src={P1} preview={P1} />
        </SwiperItem>
        <SwiperItem>
          <Image src={P2} />
        </SwiperItem>
        <SwiperItem>
          <Image src={P3} />
        </SwiperItem>
      </Swiper>
      <View className={styles.textArea}>
        <View className={styles.title}>还是这家烤面筋</View>
        <RichText className={styles.desc} nodes={content} />
        <CommentArea />
      </View>
      <InputComment closeInput={closeInput} show={onInput} />
      <BottomOperation toInput={toInput} show={!onInput} />
    </View>
  );
}
